import { Carousel, WingBlank } from 'antd-mobile';
import React from "react"


class Swipe extends React.Component {
  state = {
    data: ['1', '2', '3'],
    imgHeight: 176,
  }
  componentDidMount() {
    // simulate img loading
    setTimeout(() => {
      this.setState({
        data: ['https://yun.duiba.com.cn/images/201808/fdalz438zd.jpg?x-oss-process=image/format,webp', 'https://yun.duiba.com.cn/images/201811/ufdoxx0w49.jpg?x-oss-process=image/format,webp', 'https://yun.duiba.com.cn/images/201808/fh9iw1evwk.jpg?x-oss-process=image/format,webp'],
      });
    }, 100);
  }
  render() {
    return (
      <WingBlank>
        <Carousel
          autoplay={true}
          infinite
          beforeChange={(from, to) => console.log()}
          afterChange={index => console.log()}
        >
          {this.state.data.map(val => (
            <a
              key={val}
             
              style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
            >
              <img
                src={val}
                src={val}
                src={val}

                alt=""
                style={{ width: '100%', verticalAlign: 'top' }}
                onLoad={() => {
                  // fire window resize event to change height
                  window.dispatchEvent(new Event('resize'));
                  this.setState({ imgHeight: 'auto' });
                }}
              />
            </a>
          ))}
        </Carousel>
      </WingBlank>
    );
  }
}

  

    export default Swipe
// ReactDOM.render(<App />, mountNode);